<template>
    <div>
        <div class ="input-label">{{params.label}}</div>
        <input  
            type="text" 
            v-bind:placeholder="params.placeholder"
            v-bind:maxlength ="params.maxlength" 
            class="ca cto-input"
            v-on:change="onChange"
         />
        <div class="arrow"></div>
    </div>
</template>

<script>
    export default{
        props:{
            params:{
                type:Object,
                default:function(){
                    return{
                        label:'',
                        placeholder:'',
                        maxlength:''
                    }
                }
            },
            cb:{}
        },
        methods:{
            onChange(e){
                var val = e.target.value;
                this.cb(val)
            }
        }

    }
</script>

<style lang="less">
    .input-label{
        position: absolute;
        top: 0;
        left: 0;
        font-size: 14px;
        color: #333;
        line-height: 44px;
        height: 44px;
    }
    .cto-input{
            width:fill-available;
            border: none;
            height: 44px;
            line-height: 44px;
            font-size: 12px;
            padding: 0 15px 0 80px;
            text-align: right;
            background-color: transparent;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            &::-webkit-input-placeholder { /* WebKit browsers */
             color: #d2d2d2;
            }
            &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
             color: #d2d2d2;
            }
            &::-moz-placeholder { /* Mozilla Firefox 19+ */
             color: #d2d2d2;
            }
            &:-ms-input-placeholder { /* Internet Explorer 10+ */
             color: #d2d2d2;
            }
      }
</style>